<template>
	<view>
		<form class="flowform" @reset="reset">
			<!-- 参考网站 https://blog.csdn.net/YY_ain/article/details/123391460 -->
			<template>
			    <view>
			        <view class="wrap">
			            <view class="u-tabs-box">
			                <u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750" ></u-tabs-swiper>
			            </view>
						
			            <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="height: calc(100vh - 15vh)">
			                <swiper-item class="swiper-item" >
			                    <scroll-view scroll-y style="height: 100%;width: 100%;">
			                    
								<view class="jn-grid-list margin-top-20" >
									<view class="jn-staff-list-cell">
										<uni-swipe-action>
											<uni-swipe-action-item v-for="(item,index) in staffs1"  :key="index" @click="removeDetils(item,index)">
												<!-- <view class="item" @click.stop="staffflow(item)"> -->
													<u-card :title="item.F_Name"  :thumb="item.F_Time" >
														<template v-slot:body>
															<view >
																<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
																	<image :src="item.F_Level1" mode="aspectFill" @click="creqateopen"></image>
																</view>
															</view>
															<view >
																<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
																	<view class="u-body-item-title u-line-2">{{item.F_Level2}}</view>
																</view>
															</view>
														</template>
														<template v-slot:foot>
															
															<view class=""><u-icon name="chat-fill" size="34" color="" label="30评论"></u-icon></view>
														</template>
													</u-card>
																										
												<!-- </view> -->
											</uni-swipe-action-item>
										</uni-swipe-action>
									</view>
								</view>
			                 
			                    </scroll-view>
			                </swiper-item>
							
			                <swiper-item class="swiper-item">
			                    <scroll-view scroll-y style="height: 100%;width: 100%;"   >
			                    <!-- <view >代发货</view> -->
								<view class="jn-grid-list margin-top-20" >
									<view class="jn-staff-list-cell">
										<uni-swipe-action>
											<uni-swipe-action-item v-for="(item,index) in staffs2"  :key="index" >
												<u-card :title="item.F_Name"  :thumb="item.F_Time" >
													<template v-slot:body>
														<view >
															<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
																<image :src="item.F_Level1" mode="aspectFill" @click="creqateopen"></image>
															</view>
														</view>
														<view >
															<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
																<view class="u-body-item-title u-line-2">{{item.F_Level2}}</view>
															</view>
														</view>
													</template>
													<template v-slot:foot>
														
														<view class=""><u-icon name="chat-fill" size="34" color="" label="130评论"></u-icon></view>
													</template>
												</u-card>
											</uni-swipe-action-item>
										</uni-swipe-action>
									</view>
								</view>
			                           
			                    </scroll-view>
			                </swiper-item>
							
			                <swiper-item class="swiper-item">
			                    <scroll-view scroll-y style="height: 100%;width: 100%;">
			                    <!-- <view >待收货</view> -->
			                    <view class="jn-grid-list margin-top-20" >
			                    	<view class="jn-staff-list-cell">
			                    		<uni-swipe-action>
			                    			<uni-swipe-action-item v-for="(item,index) in staffs3"  :key="index" >
			                    				<u-card :title="item.F_Name"  :thumb="item.F_Time" >
			                    					<template v-slot:body>
			                    						<view >
			                    							<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
			                    								<image :src="item.F_Level1" mode="aspectFill" @click="creqateopen"></image>
			                    							</view>
			                    						</view>
			                    						<view >
			                    							<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
			                    								<view class="u-body-item-title u-line-2">{{item.F_Level2}}</view>
			                    							</view>
			                    						</view>
			                    					</template>
			                    					<template v-slot:foot>
			                    						
			                    						<view class=""><u-icon name="chat-fill" size="34" color="" label="230评论"></u-icon></view>
			                    					</template>
			                    				</u-card>
			                    			</uni-swipe-action-item>
			                    		</uni-swipe-action>
			                    	</view>
			                    </view>            
			                    </scroll-view>
			                </swiper-item>
							
			                <swiper-item class="swiper-item">
			                    <scroll-view scroll-y style="height: 100%;width: 100%;"   >
			                     <!-- <view >待评价</view> -->
			                     <view class="jn-grid-list margin-top-20" >
			                     	<view class="jn-staff-list-cell">
			                     		<uni-swipe-action>
			                     			<uni-swipe-action-item v-for="(item,index) in staffs4"  :key="index" >
			                     				<u-card :title="item.F_Name"  :thumb="item.F_Time" >
			                     					<template v-slot:body>
			                     						<view >
			                     							<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
			                     								<image :src="item.F_Level1" mode="aspectFill" @click="creqateopen"></image>
			                     							</view>
			                     						</view>
			                     						<view >
			                     							<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
			                     								<view class="u-body-item-title u-line-2">{{item.F_Level2}}</view>
			                     							</view>
			                     						</view>
			                     					</template>
			                     					<template v-slot:foot>
			                     						
			                     						<view class=""><u-icon name="chat-fill" size="34" color="" label="330评论"></u-icon></view>
			                     					</template>
			                     				</u-card>
			                     			</uni-swipe-action-item>
			                     		</uni-swipe-action>
			                     	</view>
			                     </view> 
			                    </scroll-view>
			                </swiper-item>
							
			            </swiper>
			        </view>
			    </view>
			</template>	

		</form>
		<w-picker :mode="mode" :pickerList="pickerList" ref="picker" :isSearchShow="isSearchShow"></w-picker>
		
		<!-- 日历 -->
		<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
	</view>
</template>

<script>
	import jnpf from '@/common/js/jnpf.js'
	
	export default {
		components: {
		},
		data() {
			return {
				list: [
					{
						name: '全部课程',
						//count: 3
					},
					{
						name: '红色教育',
						//count: 2
					},
					{
						name: '传统文化',
						//count: 3
					},
					{
						name: '社会实践',
						//count: 2
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				
				show: false,
				mode: 'date',
				datevalue: this.getdate(),
								
				staffList1: [],
				staffList2: [],
				staffList3: [],
				staffList4: [],
				
				multiple: false, //多选
				selectParent: false, //父级可选
				
				type: 'textarea',
				border: false,
				height: 100,
				autoHeight: true,
				staff: {
					billno:'K241130001',
					billcredate:'2025-01-06',
					billtime:'09:00~10:30',
					workingNature:'奉化学楼101',
					fullName: '宋江',
					node: '有机化学实验操作课',
					idNumber: '',
				},
				mode: '',
				isSearchShow:false,
				pickerList: [],
				isId:false,
				listId:''
			}
		},
		onLoad(e) {
			this.isId = Object.prototype.hasOwnProperty.call(e, 'id');
			this.listId = e.id;
			
			this.init();
		},
		computed: {
			//预约工位内容
			staffs1: function() {
				let search = this.search;
				let staffList = this.staffList1;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			},
			//预约设备内容
			staffs2: function() {
				let search = this.search;
				let staffList = this.staffList2;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			},
			//预约危化品内容
			staffs3: function() {
				let search = this.search;
				let staffList = this.staffList3;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			},
			//预约耗材内容
			staffs4: function() {
				let search = this.search;
				let staffList = this.staffList4;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			}
		},
		onReady(){
					uni.getSystemInfo({
						success: (res) => {
							let topHeight = 100;
							let winHeight = (res.windowHeight * (750/res.windowWidth));
							// boxHeight为屏幕高度 - 顶部高度
							this.boxHeight = winHeight - topHeight + 'rpx';
						}
					});
				},
		methods: {
			staffflow(item) {
				console.log('staffflow')
				uni.navigateTo({
					url: './form?id=' + item.F_Name
				})
			},
			creqateopen() {
				uni.navigateTo({
					url: './form'
				});
			},
			
			
			removeDetils(item, index) {
				console.log('removeDetils')
			},
			
			getdate(){
			   //返回当前日期
			   let date = new Date();
			   let formattedDate = date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }); // 输出格式如 "2023-01-01"
			   console.log(formattedDate);
			   return formattedDate;
			},
			init() {
				var res={
					"data": {
						"code": 200,
						"msg": "Success",
						"data": {
							"list1": [								
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/logo1.png",
									"level2": "中国四大博物馆之一，青铜器、陶瓷、书画馆藏顶级",
									"level3": "高中",
									"fullName": "上海博物馆"
								},
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base1.jpg",
									"level2": "上海科技馆，是一座综合性的自然科学技术博物馆，也是中国重要的科普教育基地和精神文明建设基地。",
									"level3": "高中",
									"fullName": "上海科技馆"
								},
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base2.jpg",
									"level2": "中共一大会址纪念馆，是介绍中国共产党诞生史迹的革命旧址纪念馆",
									"level3": "高中",
									"fullName": "中国一大会址"
								},
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base3.jpg",
									"level2": "上海市落实科教兴国战略和大力推进素质教育的一项标志性工程，也是上海最大的校外教育场所",
									"level3": "高中",
									"fullName": "东方绿舟"
								},
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base4.jpg",
									"level2": "真实再现了鲁迅博大深邃的精神世界以及他曲折、多姿的人生历程",
									"level3": "高中",
									"fullName": "上海鲁迅纪念馆"
								},
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base5.jpg",
									"level2": "带领学生走进区域内主题研学场所，拓展学生们的思维，培养热爱科学、善于研究的青少年人才",
									"level3": "高中",
									"fullName": "中国航海博物馆"
								},
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base6.jpg",
									"level2": "培养学生独立思考、善于观察、勤于动手、发掘探索的能力，为中小学生提供一个不同于学校课堂的自然学堂",
									"level3": "高中",
									"fullName": "辰山植物园"
								},
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base7.jpg",
									"level2": "“八一三”两次淞沪抗战和上海人民十四年抗日斗争史实的专题纪念馆",
									"level3": "高中",
									"fullName": "淞沪抗战纪念馆"
								},
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base8.jpg",
									"level2": "东方明珠还是娱乐、美食、博览以及购物的小世界。在塔座的上海城市历史发展陈列馆可以了解到上海近代历史的变迁",
									"level3": "高中",
									"fullName": "东方明珠"
								},
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base9.jpg",
									"level2": "典型的江南水乡古镇，街道小巷间水路纵横，环境十分优雅",
									"level3": "高中",
									"fullName": "朱家角古镇"
								}
							  ],
							"list2": [
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base2.jpg",
									"level2": "中共一大会址纪念馆，是介绍中国共产党诞生史迹的革命旧址纪念馆",
									"level3": "高中",
									"fullName": "中国一大会址"
								},
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base4.jpg",
									"level2": "真实再现了鲁迅博大深邃的精神世界以及他曲折、多姿的人生历程",
									"level3": "高中",
									"fullName": "上海鲁迅纪念馆"
								},
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base7.jpg",
									"level2": "“八一三”两次淞沪抗战和上海人民十四年抗日斗争史实的专题纪念馆",
									"level3": "高中",
									"fullName": "淞沪抗战纪念馆"
								}
							  ],
							"list3": [
								
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base5.jpg",
									"level2": "带领学生走进区域内主题研学场所，拓展学生们的思维，培养热爱科学、善于研究的青少年人才",
									"level3": "高中",
									"fullName": "中国航海博物馆"
								},
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base9.jpg",
									"level2": "典型的江南水乡古镇，街道小巷间水路纵横，环境十分优雅",
									"level3": "高中",
									"fullName": "朱家角古镇"
								},
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base1.jpg",
									"level2": "中国四大博物馆之一，青铜器、陶瓷、书画馆藏顶级",
									"level3": "高中",
									"fullName": "上海博物馆"
								}
							  ],
							"list4": [
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base1.jpg",
									"level2": "上海科技馆，是一座综合性的自然科学技术博物馆，也是中国重要的科普教育基地和精神文明建设基地。",
									"level3": "高中",
									"fullName": "上海科技馆"
								},
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base3.jpg",
									"level2": "上海市落实科教兴国战略和大力推进素质教育的一项标志性工程，也是上海最大的校外教育场所",
									"level3": "高中",
									"fullName": "东方绿舟"
								},
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base6.jpg",
									"level2": "培养学生独立思考、善于观察、勤于动手、发掘探索的能力，为中小学生提供一个不同于学校课堂的自然学堂",
									"level3": "高中",
									"fullName": "辰山植物园"
								},
								{
									"time": "http://180.166.193.6:90/images/ai.png",
									"level1": "http://180.166.193.6:90/images/study/base8.jpg",
									"level2": "东方明珠还是娱乐、美食、博览以及购物的小世界。在塔座的上海城市历史发展陈列馆可以了解到上海近代历史的变迁",
									"level3": "高中",
									"fullName": "东方明珠"
								}
							  ],
							"pagination": {
								"currentPage": 1,
								"pageSize": 10,
								"total": 635
							}
						}
					},
					"statusCode": 200,
					"errMsg": "request:ok",
					"cookies": []
				}
				let staff1 = res.data.data.list1;
				this.staffList1=[];
				for (let i = 0; i < staff1.length; i++) {
					this.staffList1.push({
						'F_Time'  : staff1[i].time,
						'F_Name'  : staff1[i].fullName,
						'F_Level1': staff1[i].level1,
						'F_Level2': staff1[i].level2,
						'F_Level3': staff1[i].level3
					})
				}
				
				let staff2 = res.data.data.list2;
				this.staffList2=[];
				for (let i = 0; i < staff2.length; i++) {
					this.staffList2.push({
						'F_Time'  : staff2[i].time,
						'F_Name'  : staff2[i].fullName,
						'F_Level1': staff2[i].level1,
						'F_Level2': staff2[i].level2,
						'F_Level3': staff2[i].level3
					})
				}
				
				let staff3 = res.data.data.list3;
				this.staffList3=[];
				for (let i = 0; i < staff3.length; i++) {
					this.staffList3.push({
						'F_Time'  : staff3[i].time,
						'F_Name'  : staff3[i].fullName,
						'F_Level1': staff3[i].level1,
						'F_Level2': staff3[i].level2,
						'F_Level3': staff3[i].level3
					})
				}
				
				let staff4 = res.data.data.list4;
				this.staffList4=[];
				for (let i = 0; i < staff4.length; i++) {
					this.staffList4.push({
						'F_Time'  : staff4[i].time,
						'F_Name'  : staff4[i].fullName,
						'F_Level1': staff4[i].level1,
						'F_Level2': staff4[i].level2,
						'F_Level3': staff4[i].level3
					})
				}
				
			},
			
			open() {
				    console.log('消息提示');
			        uni.showToast({
			        	title: '新增弹窗',
			        	duration: 2000
			        });
			      },
			
			submit() {
				//console.log('返回上一页成功');
				// 在某个事件或条件下触发返回上一页操作
				uni.navigateBack({
				    delta: 1, // 返回的页面数，如果是1表示返回上一级页面，可以根据需求调整
				    success: function() {
				        console.log('返回上一页成功');
				    },
				    fail: function(error) {
				        console.error('返回上一页失败', error);
				    }
				});

			},
			reset(e) {
				//console.log('清空数据')
			},
			
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				
			},
			transition({ detail: { dx } }) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({ detail: { current } }) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	}
</script>

<style>
	page {
		background-color: #f0f2f6;
	}
</style>
